<template>
  <div class="content validate-email">
    <div class="content-title">
      <span class="email">{{ $t("module.userCenter.registeredEmail") }}</span>
      <Icon class="emailIcon" @click="emailIcon" type="ios-close" size="40" />
    </div>
    <div class="content-main">
      <div class="hint">{{ $t("module.userCenter.SmsVerificationEmail") }} {{ modelForm.email }}</div>
      <Form :model="modelForm" ref="editForm" class="ivu-form-no-margin-bottom" :rules="rule" :label-width="0">
        <Form-item prop="captcha">
          <Input
            v-model="modelForm.captcha"
            :placeholder="$t('module.userCenter.accountCode')"
            size="large"
            style="width: 335px;"
            :maxlength="10"
          />
          <div style="position: absolute; right: -38px; top: 0;" v-if="modelForm.email != null">
            <RPButton
              size="large"
              @click="getEmailCaptcha"
              :disabled="isWaiting"
              :text="buttonName"
              class="getEmailCaptcha"
              style="borderradius: 0;"
            />
          </div>
        </Form-item>
        <FormItem class="button">
          <RPButton
            size="large"
            style="width: 45%; borderradius: 0; height: 34px;"
            @click="next"
            :text="$t('module.userCenter.next')"
          />
          <RPButton
            size="large"
            optType="text"
            @click="stepEmail"
            style="width: 45%; borderradius: 0; height: 34px;"
            :text="$t('module.userCenter.step')"
          />
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
import { verificationWaittingTime, verificationTypeEmail, verificationSubTypeForgotPassword } from "@/const.js";
import userCenter from "@lang/modules/userCenter";
export default {
  name: "validate-email",
  components: {},
  locales: {
    "zh-CN": {
      module: {
        userCenter: userCenter["zh-CN"]
      }
    },
    "en-US": {
      module: {
        userCenter: userCenter["en-US"]
      }
    }
  },
  props: {},
  data() {
    return {
      modelForm: {
        email: "",
        captcha: ""
      },
      rule: {
        captcha: [
          {
            required: true,
            message: this.$t("module.userCenter.accountCode"),
            trigger: "blur"
          }
        ]
      },
      buttonName: this.$t("module.userCenter.getVerificationCode"),
      isWaiting: false,
      tenant: null
    };
  },
  computed: {},
  created: function() {
    // console.log(this.$route.params);
    if (this.$route.params.email) {
      this.init(this.$route.params);
    } else {
      this.$router.push({
        name: "enter-account"
      });
    }
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    init({ email, tenant }) {
      this.modelForm.email = email;
      this.tenant = tenant;
    },
    getEmailCaptcha() {
      this.isWaiting = true;
      this.buttonName = this.$t("module.userCenter.send");
      let param = {
        type: verificationTypeEmail,
        subType: verificationSubTypeForgotPassword,
        recipient: this.modelForm.email,
        tenant: this.tenant
      };
      window.$http.post(`${window.RPConfig.userCenter}/message/send?tenant=` + this.tenant, param).then(response => {
        let i = verificationWaittingTime;
        let intervalId = setInterval(() => {
          this.buttonName = this.$t("module.userCenter.obtain") + "(" + i-- + "s)";
          if (i == 0) {
            clearInterval(intervalId);
            this.isWaiting = false;
            this.buttonName = this.$t("module.userCenter.resend");
          }
        }, 1000);

        this.$message.success({
          content: this.$t("module.userCenter.sendSuccess"),
          duration: 3
        });
      });
    },
    next() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          window.$http
            .post(
              `${window.RPConfig.userCenter}/user/verifySecInfo` +
                "?secInfo=" +
                this.modelForm.email +
                "&code=" +
                this.modelForm.captcha +
                "&tenant=" +
                this.tenant
            )
            .then(response => {
              if (response && response.data) {
                this.$router.push({
                  name: "change-password",
                  params: { account: this.modelForm.email, captcha: this.modelForm.captcha, tenant: this.tenant }
                });
              } else {
                this.$message.error({
                  content: this.$t("module.userCenter.errorAccountCode"),
                  duration: 3
                });
              }
            });
        }
      });
    },
    stepEmail() {
      this.$router.push({ 
        // path: "/forgot-password/retrieve-password",
        name: "retrieve-password",
        params: {...this.$route.params}
      });
    },
    emailIcon() {
      const type = window.RPConfig.logintype;
      if (type === "cas") {
        window.location.href = window.RPConfig.cas_logout + "?service=" + window.location.origin;
      } else if (type === "single") {
        this.$router.push({ path: "/login" });
      } else {
        window?.$util?.redirectToLogin()
      }

    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less">
@import "./forgotPassword.less";
</style>
